import { HtmlNode, HtmlNodeModel } from '@logicflow/core';

class DescriptionModel extends HtmlNodeModel {
  setAttributes() {
    // 禁止节点文本编辑
    this.text.editable = false;
    const {
      properties: { width, height },
    } = this;
    this.width = width || 300;
    this.height = height || 200;
  }

  getDefaultAnchor(): { x: number; y: number; id: string }[] {
    return [];
  }
}
class Description extends HtmlNode {
  setHtml(rootEl: HTMLElement) {
    const {
      properties: { title, columns = [], data = {} },
    } = this.props.model;

    const el = document.createElement('div');
    el.className = 'description-wrapper';
    const html = `
      <div>
      ${title ? `<div class="description-head">${title}</div>` : ' '}
        <div class="description-body">
          ${columns
            .map(
              (o: any) => `
          <div class="description-item">
            <div class="description-item__label">${o.label}</div>
            <div class="description-item__value" style="${o.style}">${data[o.value] || ''}</div>
          </div>
          `
            )
            .join('')}
        </div>
      </div>
    `;
    el.innerHTML = html;
    // 需要先把之前渲染的子节点清除掉。
    rootEl.innerHTML = '';
    rootEl.appendChild(el);
  }
}

export default {
  type: 'Description',
  view: Description,
  model: DescriptionModel,
};
